<template>
  <q-page class="row no-wrap">
    <page-left-menu
      :title="$t('connections.title')"
      class="page-menu"
      color="#3498DB"
      :menus="menus"
      @onChange="onMenuChange"
    />
    <q-scroll-area class="page-scroll">
      <div class="row justify-center q-pa-md" v-if="currentUser">
        <router-view />
      </div>
      <guest-view v-else />
    </q-scroll-area>
  </q-page>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import PageLeftMenu from 'layouts/components/PageLeftMenu.vue';
import { PageLeftItem } from 'layouts/components/PageLeftItem';
import GuestView from 'pages/guests/Connections.vue';
import { useUserStore } from 'src/stores/user-store';
import { useI18n } from 'vue-i18n';
const userStore = useUserStore();
const currentUser = computed(() => userStore.currentUser);
const menus = ref<PageLeftItem[]>([
  { label: 'connections.following', routeName: 'Following' },
  { label: 'connections.followers', routeName: 'Followers' },
]);
const router = useRouter();
async function onMenuChange(info: PageLeftItem) {
  await router.replace({ name: info.routeName });
}
</script>
<style lang="sass" scoped>
.connection-page
  max-width: 1450px
  min-width: 960px
</style>
